<template>
  文本框：
  <el-input
    v-model="refText"
    title="提示信息"
    maxLength="10"
    placeholder="直接设置占位信息"
    :prefix-icon="Search"
  /><br>
  值：{{refText}}<br>
  下拉列表框：
  <el-select v-model="refSelect" @change="myChange">
    <el-option label="选项一" value="1"></el-option>
    <el-option label="选项二" value="2"></el-option>
  </el-select><br>
  值：{{refSelect}}<br>
  <hr>
  
  文本框：
<el-input
  v-model="refText"
  v-bind="textProps"
  @input="myInput"
>
  <!--设置插槽
  <template #prepend>
    插槽演示
  </template>-->
</el-input>
  <br>
  值：{{refText}}<br>

  下拉列表框：
<el-select v-model="refSelect" @change="myChange">
  <el-option
    v-for="(item, index) in selectProps.optionList"
    :key="index"
    :value="item.value"
    :label="item.label"
  ></el-option>
</el-select><br>
  值：{{refSelect}}<br>

  <el-button @click="changeProps">修改属性</el-button>

  <el-date-picker v-model="mydate"
    type="week"
    value-format="gggg ww"
    placeholder="">
  </el-date-picker>
    {{mydate}}----{{dateFomat}}
</template>

<script>
import { reactive, ref, computed } from 'vue'
import { ElSelect, ElOption, ElAutocomplete, ElButton, ElInput, ElDatePicker } from 'element-plus'
import { Edit, Search } from '@element-plus/icons'
// import { isoWeek } from '../../../../node_modules/dayjs/plugin/isoWeek.js'
import { lifecycle } from '/nf-ui-core'
import dayjs from 'dayjs'

// style="background-color: var(--el-background-color-base);"
</script>

<script setup>
lifecycle('UI库的基础控件的测试', true)
// dayjs.extend(isoWeek)
// window._isoWeek = isoWeek
window._dayjs = dayjs

const mydate = ref('')
const dateFomat = computed(() => dayjs(mydate.value).format('gggg年 ww 周')) // .format('gggg年 WW 周'))

const refText = ref('')
const selectValue = ref('Http://')

const textProps = reactive({
  title: '提示信息',
  maxLength: 10,
  placeholder: '占位信息',
  disabled: false,
  'prefix-icon': Edit
})

// 文本框的 input 事件
const myInput = (val) => {
  console.log('el-input 的 input：', val)
}

const refSelect = ref('')
const selectProps = reactive({
  optionList: [
    {"value": '1', "label": '选项一'},
    {"value": '2', "label": '选项二'},
    {"value": '3', "label": '选项三'}
  ]
})

// 修改属性的事件
const changeProps = () => {
  textProps.title = new Date().valueOf()
  textProps.maxLength += 1
  textProps.disabled = !textProps.disabled
}

</script>